<template>
	<view class="">
		<view class="" v-show="!loadShow">
			<view class="vtop"> 
				<!-- <view  >
					<scroll-view scroll-x style="height: 100rpx;" :scroll-into-view="rolldistance" :scroll-with-animation="true">
						<view class="u-flex u-row-left u-p-t-20 u-p-b-20">
							<view class="" id="akun1" style="padding: 0 16rpx;"></view>
							<view class="tags" id="akun2" :class="cateStatic=='new'?'tag-active':''" @click="cateClick('new','','akun1')">最新</view>
							<view class="tags" id="akun3" :class="cateStatic=='hot'?'tag-active':''" @click="cateClick('hot','','akun1')">精选</view>
							<view class="tags" id="akun4" :class="cateStatic=='创意'?'tag-active':''" @click="cateClick('创意','category','akun2')">创意</view>
							<view class="tags" id="akun5" :class="cateStatic=='文字控'?'tag-active':''" @click="cateClick('文字控','tags','akun3')">文字控</view>
							<view class="tags" id="akun6" :class="cateStatic=='动漫'?'tag-active':''" @click="cateClick('动漫','category','akun4')">动漫</view>
							<view class="" style="width: 40rpx;">ㅤ</view>
						</view>
					</scroll-view>
				</view> -->
				
			</view>
			<!-- <view class="search u-flex u-row-left" style="display: flex;
			"  @click="search" v-if="!homeTop || scrollTop <= homeTop - (menuButtonInfo.top + 40 + 15)">
				<u-icon name="/static/icon/search.png" size="36"></u-icon>
				<text class="u-p-l-15">搜索你想要的壁纸</text>
			</view> -->
			<!-- <view class="" :style="{marginTop: 'calc('+menuButtonInfo.top+'px + 80rpx + 68rpx + 24rpx)'}"></view> -->
			<view class="" @click.native="search">
				<u--input
				  placeholder="搜索你想要的壁纸"
								prefixIcon="/static/icon/search.png"
				  border="bottom"
				  clearable
								:disabled='true'
				></u--input>
			</view>
			<view class="u-p-t-20"> 
				<u-swiper :effect3d="true" height="180" bg-color="#FFFFFF" name="image" border-radius="16" imgMode="scaleToFill" effect3d-previous-margin="40" :list="bannerList" @click="bannerClick"></u-swiper>
			</view>
			<view class="u-p-t-40">
				<view class="u-p-l-40 u-p-r-40">
					<u-cell-group>
							<u-cell   :border="false" title="热门推荐" isLink value="更多" @click="listClick('category','',-2)"></u-cell>
							 
					</u-cell-group>
				 
				</view>
				 
				<scroll-view scroll-y class="u-p-t-30" style="height: 550rpx;width: 750rpx;">
					<view  >
					 <view class="u-flex u-row-left " style="display: flex;flex-wrap: wrap;padding-left: 40rpx;">
					 	<block v-for="(item, index) in hotList" :key="index">
					 		<block   >
					 			<view class="tab" @click="detail(item._id, index, item.image)">
					 				<image :src="item.image" lazy-load style="width: 215rpx;height: 350rpx;" mode="aspectFill"></image>
					 				<!-- <view class="array">{{item.images.length}}</view> -->
					 			</view>
					 		</block>
					 	</block>
					 </view>
					<!-- <u-album  :urls="hotList" space="13" :rowCount="3"  multipleSize="116" keyName="image"></u-album> -->
							<!-- <view class="tab" v-for="(item, index) in hotList"   @click="detail(item._id, 0, item.images)">
							 
							 <u--image :showLoading="true" :src="item.image" width="380rpx" mode="aspectFill"   ></u--image>
								 
							</view> -->
						<!-- </block> -->
						<view class="" style="width: 40rpx;">ㅤ</view>
					</view>
				</scroll-view>
			</view>
			<view class="u-p-t-30">
				<view class="u-p-l-40 u-p-r-40 u-p-t-20 u-p-b-20">
					<u-cell-group>
						<u-cell  :border="false" title="每日推荐" isLink value="更多" @click="listClick('category','',-1)"></u-cell>
							 
					</u-cell-group>
					<!-- <u-section title="每日推荐" :show-line="false" :bold="false" :font-size="36" sub-title="更多" @click="listClick('category','',-1)"></u-section> -->
				</view>
				<unicloud-db v-slot:default="{data, loading, error, options}" collection="myou-img-category">
					<view v-if="error">{{error.message}}</view>
					<view v-else>
						<scroll-view scroll-x style="height: 80rpx;" :scroll-into-view="rolldistance" :scroll-with-animation="true">
							<view class="query u-m-t-10 u-m-b-10 u-m-r-30 u-row-left" style="display: flex;">
								<view class="" id="akun1" style="padding: 0 18rpx;"></view>
								<view class="tags" id="akun2" :class="cateStatic=='new'?'tag-active':''" @click="cateClick('new','','akun1')">最新</view>
								<view class="tags" id="akun3" :class="cateStatic=='hot'?'tag-active':''" @click="cateClick('hot','','akun1')">精选</view>
								<view v-for="(item,index) in data">
									<view class="tags" :id="`akun${index + 4}`" :class="cateStatic==item.name?'tag-active':''" @click="cateClick(item.name,'category','akun2')">{{item.name}}</view>
								</view>
								<!-- <view class="tags" id="akun5" :class="cateStatic=='文字控'?'tag-active':''" @click="cateClick('文字控','tags','akun3')">文字控</view>
								<view class="tags" id="akun6" :class="cateStatic=='动漫'?'tag-active':''" @click="cateClick('动漫','category','akun4')">动漫</view> -->
								<view class="" style="width: 40rpx;">ㅤ</view>
							</view>
						</scroll-view>
					</view>
				</unicloud-db>
			
				<view class="u-flex u-row-left " style="display: flex;flex-wrap: wrap;padding-left: 40rpx;">
					<block v-for="(item, index) in coverList" :key="index">
						<block   >
							<view class="tab" @click="detail(item._id, index_, item.image)">
								<image :src="item.image" lazy-load style="width: 215rpx;height: 350rpx;" mode="aspectFill"></image>
								<!-- <view class="array">{{item.images.length}}</view> -->
							</view>
						</block>
					</block>
				</view>
			</view>
			
			<u-loadmore :status="loadStatus" :font-size="24" :margin-top="30" :margin-bottom="20" color="#B8B8B8"/>
			<view class="" style="height: 180rpx;"></view>
		</view>
		<view class="loading_page" v-show="loadShow">
			<image src="/static/loading/loading.gif" style="width: 100rpx;height: 100rpx;"></image>
		</view>
		<view @click="backTop" class="back backTop " style="display: flex;flex-direction: column;align-items: center;"  :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/backtop.png" style="width: 36rpx;height: 36rpx;margin-top: 10rpx;"></image>
			<view class="text">顶部</view>
		</view>
		<view @click="search" class="back backSearch " style="display: flex;flex-direction: column;align-items: center;" :class="backShow?'backTop_show':'backTop_hide'">
			<image src="/static/search.png" style="width: 30rpx;height: 30rpx;margin-top: 10rpx;"></image>
			<view class="text">搜索</view>
		</view>
		<!-- <foo-bar @toIndex="toIndex" :home="0"></foo-bar> -->
	</view>
</template>

<script>
	// 获取系统状态栏的高度
	let menuButtonInfo = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif 
	import models from '@/components/model/model.vue'
	export default {
		components:{ 
			models
		},
		data() {
			return {
				menuButtonInfo: menuButtonInfo,
				// 加载
				loadShow: true,
				scrollTop: 0,
				homeTop: 0,
				// 首页数据
				bannerList: [],
				hotList: [],
				coverList: [],
				cateStatic: 'new',
				// 下拉
				pageIndex: 0,
				loadStatus: 'loadmore',
				// 滚动的位置
				rolldistance: '',
				
				adFlag: true,
				backShow: false,
			}
		},
		async onLoad({userId,detailId,index}) { 
			if(userId) uni.setStorageSync('userId', userId)
			if(detailId) uni.navigateTo({url: '/pages/detail/detail?id='+detailId+'&index='+index})
			
			// var res = await this.$u.get('/wp-json/wp/v2/posts?per_page=10&page=1').then()
			// for (var i = 0; i < res.length; i++) {
			// 	var images_ = []
			// 	var str = res[i].content.rendered.split('<img loading="lazy" class="alignnone wp-image-7 size-full" src="')
			// 	for (var i = 1; i < str.length; i++) {
			// 		var b = str[i].indexOf('"')
			// 		images_.push(str[i].substr(0,b))
			// 	}
			// 	console.log(images_)
			// 	// res[i]['images'] = images_
			// }
			// console.log(res)
			let that = this
			await that.getBannerList()
			await that.getHotList()
			await that.getList(that.cateStatic)
			
			// #ifdef MP-WEIXIN
			uni.preloadAd([{
				  unitId: 'adunit-eaa3677a75ab13a7',
				  type: 'custom'
				},{
			      unitId: 'adunit-0d2cf81781c3cd01',
			      type: 'banner'
			    },{
			      unitId: 'adunit-c99bff2627193131',
			      type: 'video'
			    }
			])
			// #endif
			
			// 获取分类位置
			that.$nextTick(function(){
				const query = uni.createSelectorQuery().in(that);
				query.select(".query").boundingClientRect(res =>{
					if(res.top){
						that.homeTop = res.top
					}
				}).exec()
			})
			
			that.loadShow = false
		},
		methods: {
 
			// 首页
			async getBannerList(){
				console.log(">>>>>getBannerList")
				let that = this;
				let list = await uniCloud.callFunction({
					name: 'query_list',
					data: {
						dbName: "opendb-banner",
						pageIndex: 1,
						pageSize: 10,
						order: {
							name: 'sort',
							type: 'desc'
						}
					}
				})
				
				that.bannerList = list.result.data
			},
			async getHotList(){
				let that = this;
				let list = await uniCloud.callFunction({
					name: 'query_list',
					data: {
						dbName: "myou-imgs",
						filter: {
							"status": 1
						},
						order: {
							// name: 'view',
							// type: 'desc'
						},
						pageIndex: 1,
						pageSize: 20
					},
				})
		 
				that.hotList = list.result.data
			},
			cateClick(e,f,t){
				var that = this
				if(e != that.cateStatic){
					if(t) that.rolldistance = t
					that.cateStatic = e
					that.getList(e,f,1)
				}
			},
			async getList(type, more, on){
				// 新增壁纸
				// let ss = await uniCloud.callFunction({
				// 	name:"timing-add"
				// })
		  
				let that = this;
				console.log("getList",type, more, on)
				var newList = that.coverList
				// 点击切换菜单 回复初始状态
				if(on == 1){
					uni.showLoading({
						mask: true,
						title: '加载中...'
					})
					newList = []
					that.pageIndex = 0
				}
				
				that.pageIndex = that.pageIndex + 1
				that.loadStatus = 'loading'
				
				let list
				if(more){
					if(more === 'tags'){
						list = await uniCloud.callFunction({
							name: 'query_list',
							data: {
								filter: {
									"status": 1,
									 
								},
								dbName: "myou-imgs",
								tags: type,
								pageIndex: that.pageIndex,
								pageSize: 5
							},
						})
					}else if(more === 'category'){
						console.log("分类category")
						list = await uniCloud.callFunction({
							name: 'query_list',
							data: {
								dbName: "myou-imgs",
								filter: {
									"status": 1,
									"category_name": type
								},
								order: {
									// "name": "time", 
									// "type": "desc",
								},
								pageIndex: that.pageIndex,
								pageSize: 5
							},
						}) 
					}
				}else{
					var filter = {"status": 1}, order = {}
					if(type=='new') order = {"name": "time", "type": "desc"}
					else if(type=='hot') order = {"name": "view", "type": "desc"}
					list = await uniCloud.callFunction({
						name: 'query_list',
						data: {
							dbName: "myou-imgs",
							filter: filter,
							order: order,
							pageIndex: that.pageIndex,
							pageSize: 5
						},
					})
				}
				
				uni.hideLoading()
				console.log("list??????",list)
				if(list.result.hasMore) that.loadStatus = 'loadmore'
				else that.loadStatus = 'nomore'
				
				that.coverList = newList.concat(list.result.data)
			},
			search(){
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			backTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			bannerClick(index){
				var id = this.bannerList[index].id
				if(id){
					uni.navigateTo({
						url: '/pages/detail/detail?id='+id
					})
				}
			},
			detail(id,index,images){
				 
				var str = decodeURIComponent(images)
				 console.log(str)
				uni.navigateTo({
					url: '/pages/detail/detail?id='+id+'&index='+index+'&images='+images
				})
			},
			listClick(type,pid,id){
				uni.navigateTo({
					url: '/pages/list/list?type='+type+'&pid='+pid+'&id='+id
				})
			},
			adLoad() {
				this.adFlag = true
			},
			adError(err) {
				this.adFlag = false
			},
			adClose() {
				this.adFlag = false
			}
		},
		async onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			await that.getList(that.cateStatic)
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(e.scrollTop > 1000){
				this.backShow = true
			}else{
				this.backShow = false
			}
		},
		onShareAppMessage(res) {
			return {
				title: '我等风也等你，近听水无声~',
				imageUrl: '/static/share_bg.jpg',
				path: '/pages/index/index?userId='+this.vuex_user._id
			}
		},
		onShareTimeline(res) {
			return {
				title: '我等风也等你，近听水无声~',
				imageUrl: '/static/share_bg.jpg',
				path: '/pages/index/index'
			}
		}
	}
</script>
<style lang="scss" scoped>
	.vtop{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 999999;
		.title{
			position: relative;
			color: #303030;
			font-size: 24px;
			line-height: 80rpx;
		}
		.search{
			background: #F3F4F5;
			height: 68rpx;
			margin: 20rpx 40rpx 15rpx 40rpx;
			padding-left: 40rpx;
			border-radius: 50px;
			text{
				color: #a6a7a8;
				font-size: 14px;
			}
		}
	}
	.tab{
		position: relative;
		width: 215rpx;
		height: 350rpx;
		border-radius: 16rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		image{
			border-radius: 16rpx;
		}
		.array{
			position: absolute;
			top: 18rpx;
			right: 0rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, 0.4);
			padding: 0rpx 12rpx 0 16rpx;
			border-radius: 20rpx 0 0 20rpx;
			font-size: 12px;
		}
	}
	.tags{
		font-size: 14px;
		background-color: #F5F6F8;
		color: #909399;
		border-radius: 40rpx;
		line-height: 60rpx;
		padding: 0 40rpx;
		margin-right: 20rpx;
		white-space:nowrap;
	}
	.tag-active{
		background-image: linear-gradient(100deg, #fcfc44 , #f8c93c);
		color: #333333;
		box-shadow: 0px 0px 10px #fff8ab;
		animation: tiaobig 0.8s ease-in-out alternate infinite;
		animation-iteration-count:1;
	}
	@keyframes tiaobig {
		0% {
			transform: scale(0.98);
		}
		25% {
			transform: scale(1.08);
		}
		50% {
			transform: scale(0.94);
		}
		75% {
			transform: scale(1.06);
		}
		100% {
			transform: scale(1);
		}
	}
	.back{
		position: fixed;
		right: -80rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 80rpx;
		padding: 8rpx;
		box-shadow: 0 0px 16px rgba(0, 0, 0, 0.2);
		transition-property: right;
		transition-duration: 0.6s;
		image{
			display: block;
		}
		.text{
			font-size: 12px;
		}
	}
	.backSearch{
		bottom: 300rpx;
		background-color: #efb336;
		.text{
			color: #FFFFFF;
		}
	}
	.backTop{
		bottom: 200rpx;
		background-color: #FFFFFF;
		.text{
			color: #efb336;
		}
	}
	.backTop_show{
		right: 20rpx!important;
	}
	.backTop_hide{
		right: -80rpx!important;
	}
</style>